<template>
  <div class="dangan view-container">
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>通知公告</span>
        </div>
        <div class="header-form">
          <!--更多-->
          <div class="header-form-item">
            <el-dropdown @command="handleCommand">
              <el-button type="default" :loading="delLoading">
                更多
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  icon="el-icon-refresh-right"
                  class="color-refresh-item"
                  command="refresh"
                >刷新</el-dropdown-item>
                <el-dropdown-item icon="el-icon-edit" class="color-edit-item" command="edit">编辑</el-dropdown-item>
                <el-dropdown-item
                  icon="el-icon-delete"
                  class="color-del-item"
                  command="del"
                >{{isBatchesDel}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

          <div class="header-form-item">
            <el-button type="danger" icon="el-icon-plus" @click="toAddPage">添加</el-button>
          </div>
          <!--搜索-->
          <div class="header-form-item">
            <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
          </div>

          <!-- <div class="header-form-item title-search">
            <el-select v-model="notice.department" placeholder="所在部门" @change="fetchData" clearable >
              <el-option
                v-for="dept in departmentList"
                :key="dept.value"
                :label="dept.label"
                :value="dept.value"
              />
            </el-select>
          </div>
          <div class="header-form-item title-search">
            <el-input v-model.trim="notice.noticeTitle" placeholder="标题" @input="fetchData" clearable></el-input>
          </div>-->
        </div>
      </div>
    </header>

    <!-- 展示 -->
    <el-main>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        border
        stripe
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <!--  :class="{ 'el-icon-document': isActive, 'el-icon-folder-opened': hasError }" -->
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column sortable label="编号" @click.stop="qwer">
          <template slot-scope="scope">
            <el-link>{{ scope.row.profileNumber }}</el-link>
          </template>
        </el-table-column>

        <el-table-column sortable prop="name" label="档案姓名" width="150" align="center"></el-table-column>
        <el-table-column sortable prop="departmentId" label="状态" width="150" align="center"></el-table-column>
        <el-table-column sortable prop="departmentName" label="部门" width="150" align="center"></el-table-column>

        <el-table-column
          prop="contractStartTime"
          label="加入本单位时间"
          width="200"
          align="center"
          sortable
        ></el-table-column>
        <el-table-column prop="contractEndTime" label="合同结束时间" width="200" align="center" sortable></el-table-column>
        <el-table-column sortable prop="creatorName" label="岗位" width="150" align="center"></el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage2"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="10"
          layout="sizes, prev, pager, next"
          :total="packlnth"
        ></el-pagination>
      </div>

      <!-- 展示详情 -->
      <el-drawer title="我是标题" :visible.sync="drawer" size="35%" :with-header="false">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="second">
            <el-row>
              <el-col :span="5">
                <small>编号</small>
              </el-col>
              <el-col :span="19">
                <!--                <el-input type="text" v-model="" />-->
                <el-input placeholder="请输入内容" v-model="xianqing.profileNumber" :disabled="true"></el-input>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="5">
                <small>档案姓名</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.name" :disabled="true"></el-input>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="5">
                <small>状态</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.status" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>部门</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.departmentId" :disabled="true"></el-input>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="5">
                <small>参加工作时间</small>
              </el-col>
              <el-col :span="19">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="xianqing.startJobTime"
                    type="datetime"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>加入本单位时间</small>
              </el-col>
              <el-col :span="19">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="xianqing.joinUsTime"
                    type="datetime"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>合同开始时间</small>
              </el-col>
              <el-col :span="19">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="xianqing.contractStartTime"
                    type="datetime"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>合同结束时间</small>
              </el-col>
              <el-col :span="19">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker
                    v-model="xianqing.contractEndTime"
                    type="datetime"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>出生年月</small>
              </el-col>
              <el-col :span="19">
                <div class="block">
                  <span class="demonstration"></span>
                  <el-date-picker v-model="xianqing.birthDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>性别</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.sex" :disabled="true"></el-input>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="详情信息" name="third">
            <el-row>
              <el-col :span="5">
                <small>民族</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.nation" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>身份证号</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.identityNumber" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>籍贯</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.originPlace" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>专业</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.major" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>毕业院校</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.graduateFrom" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>职称</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.positionalTitles" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>家庭住址</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.homeAddress" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>家庭电话</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.homeTelephone" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>电子邮件</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.email" :disabled="true"></el-input>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="其他信息" name="first">
            <el-row>
              <el-col :span="5">
                <small>奖惩情况</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.achievements" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>培训情况</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.trainingSituation" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>工作简历</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.jobResume" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>社会关系</small>
              </el-col>
              <el-col :span="19">
                <el-input
                  placeholder="请输入内容"
                  v-model="xianqing.socialRelationship"
                  :disabled="true"
                ></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>备注</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.remark" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>其他</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.other" :disabled="true"></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="5">
                <small>附件</small>
              </el-col>
              <el-col :span="19">
                <el-input placeholder="请输入内容" v-model="xianqing.name" :disabled="true"></el-input>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-drawer>
    </el-main>

    <!-- 删除弹出框 -->
    <el-dialog title="删除" :visible.sync="dialogVisibleSS" width="500px">
      <span>确定删除该文件吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleSS = false">取 消</el-button>
        <el-button type="primary" @click="delS">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import listMixin from "@/mixin/listMixin";
import renshiapi from "@/api/renshi/renshidangan";
export default {
  name: "renshidangan",
  mixins: [listMixin],
  data() {
    return {
      updateID: [],
      id: 0,
      drawer: false,
      tableData: [],
      xianqing: [],
      dialogVisibleSS: false,
      user: {
        pageIndex: "1",
        pageSize: "5"
      },
      activeName: "second",
      delsS: [], //删除数据组,
      packlnth: 0,
      currentPage2: 5,
      mixinParams: {
        addUrl: "",
        editUrl: "/renshidangan/renshiupda",
        propertyName: "profileId",
        API: renshiapi,
        deleteMethod: "danandel"
      }
    };
  },

  //生命周期
  created() {
    this.selcAll();
  },
  methods: {
    fetchData() {
      this.selcAll();
    },
    qwe() {},
    qwer() {
      this.handleRowClick();
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange(val) {
      this.user.pageSize = val;
      console.log(`当前页: ${this.user.pageSize}`);
      this.selcAll();
    },
    handleCurrentChange(val) {
      this.user.pageIndex = val;
      console.log(`当前页: ${this.user.pageIndex}`);
      this.selcAll();
    },

    selcAll() {
      renshiapi.SelectFen(this.user).then(res => {
        this.tableData = res.records;
        console.log(this.tableData);
        this.packlnth = res.total;
      });
    },

    //点击查询ID
    handleRowClick(row, column, event) {
      this.$refs["multipleTable"];
      this.id = row.profileId;
      console.log(this.id);

      renshiapi.renyuanAlls(this.id).then(res => {
        this.xianqing = res.result;
        console.log(this.xianqing);
      });

      this.drawer = true;
    },
    //
    // handleSelectionChanges(arr) {
    //   this.delsS = [];
    //   this.updateID = [];
    //   for (const val of arr) {
    //     this.delsS.push(val.profileId);
    //     this.updateID.push(val.profileId)
    //     console.log(this.updateID);
    //   }
    // },
    //时间格式
    updateTimeFmt(row) {
      return new Date(row.updateTime).toLocaleString();
    },

    delC() {
      console.log(this.delsS);

      if (!this.delsS.length) {
        this.$message.info("请选择一项");
        return;
      }

      this.dialogVisibleSS = true;
    },

    //删除文件夹
    delS() {
      console.log(this.delsS);

      renshiapi
        .danandel(this.delsS)
        .then(res => {
          this.selcAll();
        })
        .catch(err => {
          this.$message.success("删除失败");
          this.selcAll();
        });
      this.dialogVisibleSS = false;
      this.selcAll();
    }
  }
};
</script>





<style scoped>
.dangheader {
  background-color: rgb(266, 266, 266);
}
.dangheader > .el-button {
  font-size: 12px;
  margin-top: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.el-tab-pane .el-row .el-col:nth-child(2) {
}

.el-tab-pane .el-row .el-col:nth-child(1) {
  color: #7a7979;
}

.el-tab-pane .el-row {
  margin: 35px;
  font-size: 20px;
}
</style>


